<template>
  <div class="container-table">
    <!-- 表格栏 -->
    <div class="table-box">
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        :size="page.size"
        layout="total, prev, pager, next, jumper"
        class="pagination"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>
  </div>
</template>
<script>
import page from '@/mixins/page'
import pagination from '@/components/pagination.vue'
import FastTable from '@/components/fast-table.vue'

export default {
  components: { FastTable, pagination },
  mixins: [page],
  props: { ids: String },
  name: 'TableOrder',
  data () {
    return {
      params: {
        state: '',
        uid: this.ids
      },
      //支付状态
      payOption: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Order_Status_Unpaid')
        },
        {
          value: 1,
          label: this.$t('m.Payment_Status_Paid')
        },
        {
          value: 2,
          label: this.$t('m.Order_freeCharge')
        },
        {
          value: 3,
          label: this.$t('m.Payment_Status_Partialrefund')
        },
        {
          value: 4,
          label: this.$t('m.Order_Status_Refunded')
        }
      ],
      //订单状态
      stateOption: [
        {
          value: '99',
          label: this.$t('m.all')
        },
        {
          value: '1',
          label: this.$t('m.Order_Status_Renting')
        },
        {
          value: '2',
          label: this.$t('m.Order_Status_Unpaid')
        },
        {
          value: '3',
          label: this.$t('m.Order_Status_Completed')
        },
        {
          value: '5',
          label: this.$t('m.Order_Status_Surveying')
        },
        // {
        //   value: 6,
        //   label: this.$t('m.Order_Status_Refunded')
        // },
        {
          value: 8,
          label: ''
        }
      ],
      fastTableOptions: {
        columns: [
          { label: this.$t('m.Order_List_OrderID'), prop: 'orderNo' },
          {
            label: this.$t('m.Order_amount'),
            prop: 'orderAmount',
            formatter: row => this.$format.amountFormat(row.orderAmount)
          },
          {
            label: this.$t('m.Order_List_PaymentStatus'),
            prop: 'paymentState',
            formatter: row =>
              this.$format.stateFormat(row.paymentState, this.payOption)
          },
          {
            label: this.$t('m.Order_List_OrderStatus'),
            prop: 'state',
            formatter: row =>
              this.$format.stateFormat(row.state, this.stateOption)
          },
          {
            label: this.$t('m.Order_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      }
    }
  },
  created () {
    this.params = this.$options.data.call(this).params
    this.params.uid = this.ids
    // console.log(this.params,this.ids)
    this.page = this.$options.data.call(this).page
    this.getPage()
  },
  methods: {
    getPage () {
      if (this.activeOrder == '1') {
        this.$api.order.getSwapOrderList(this.params, this.page).then(res => {
          if (this.$ok(res)) {
            this.page = res.data
          }
        })
      } else {
        this.$api.order.getOrderList(this.params, this.page).then(res => {
          if (this.$ok(res)) {
            this.page = res.data
          }
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.container-table {
  .table-box {
    padding: 0 0 20px 0;
  }
  .pagination {
    ::v-deep .el-input__inner {
      padding: 0 3px !important;
      text-align: center;
    }
  }
}
</style>
